<template>
  <div class="box">

  </div>
</template>

<script>
export default {
  beforeCreate () {
    console.log("-----redBox-----beforeCreate----------");
    console.log(this.user);
    // this.fn()
  },
  created () {
    console.log("-----redBox-----created----------");
    console.log(this.user);
    this.fn();
  },
  beforeMount () {
    console.log("-----redBox-----beforeMount----------");
    var app = document.querySelector('.box');
    console.log(app);
  },
  mounted () {
    console.log("-----redBox-----mounted----------");
    var app = document.querySelector('.box');
    console.log(app);
  },


  beforeUpdate () {
    console.log("-----redBox-----beforeUpdate----------");
  },
  updated () {
    console.log("----redBox------updated----------");
  },
  beforeDestroy () {
    console.log("-----redBox-----beforeDestroy----------");
  },
  destroyed () {
    console.log("------redBox----destroyed----------");
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 100px;
  width: 100px;
  background: red;
}
</style>